 // 图片数据
 const imgs = [{
    s:"./imgs/third-s1.jpg",
    m:"./imgs/third-m1.jpg",
    l:"./imgs/third-l1.jpg",
}
,{
    s:"./imgs/third-s2.jpg",
    m:"./imgs/third-m2.jpg",
    l:"./imgs/third-l2.jpg",
},
{
    s:"./imgs/s3.jpg",
    m:"./imgs/m3.jpg",
    l:"./imgs/l3.jpg",
},
{
    s:"./imgs/s4.jpg",
    m:"./imgs/m4.jpg",
    l:"./imgs/l4.jpg",
}
];

// 点击小图切换中图和大图
function Tab(){
    this.li = document.querySelectorAll(".firstscreen-left li");
    this.sImg = document.querySelector(".midle_box img");
    this.bImg = document.querySelector(".big_box img");
    this.data = imgs;
    this.index = 0;
    this.addEvent();
}
Tab.prototype.addEvent = function(){
    const that = this;
    for(let i=0;i<this.li.length;i++){
        this.li[i].xuhao = i;
        this.li[i].onclick = function(){
            that.hide();
            that.getIndex(this);
        }
    }
}
Tab.prototype.hide = function(){
    this.li[this.index].className = "";
}
Tab.prototype.getIndex = function(now){
    this.index = now.xuhao;
    this.show();
}
Tab.prototype.show = function(){
    this.li[this.index].className = "active";
    this.sImg.src = this.data[this.index].m;
    this.bImg.src = this.data[this.index].l;
}
new Tab();






// 功能
class Magnifier{
    constructor(){
        this.sBox = document.querySelector(".midle_box");
        this.sSpan = document.querySelector(".midle_box span");
        this.bBox = document.querySelector(".big_box");
        this.bImg = document.querySelector(".big_box img");
        this.addEvent();
    }
    move(ops){
        let l = ops.x - this.sSpan.offsetWidth/2;
        let t = ops.y - this.sSpan.offsetHeight/2;
        if(l < 0) l = 0;
        if(t < 0) t = 0;
        if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
            l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
        }
        if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
            t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
        }
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";
        const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
    init(){
        this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    addEvent(){
        const that = this;
        this.sBox.onmouseenter = function(){
            that.show();
        }
        this.sBox.onmouseleave = function(){
            that.hide();
        }
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            const pos = {
                x:e.offsetX,
                y:e.offsetY
            };
            that.move(pos);
        }
    }
    show(){
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";
        this.init();
    }
    hide(){
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
}



 //商品详情
//从商品列表页获取导数据在详情页渲染
// console.log(location.search);
const id = location.search.split("=")[1];
console.log(id);

// // 方法一：获取所有商品数据，前端筛选（不推荐）
// // 方法二：根据id请求后端接口，直接获取指定数据（后端筛选）（推荐）

ajax({
    url: "http://localhost:3000/api",
    data: {
        type: "getGoods1"
    },
    success: res => {
        // 后端的obj->ajax的succes-res 数据解析
        // console.log(res);
        res = JSON.parse(res).msg;
        let i = 0;
        // 比对id
        res.some((val, idx) => {
                i = idx;
                return val.proId === id;
                
            })
            console.log(res[i]);
            const left = document.querySelector(".firstscreen-left");
            
          

        let lstr = "";
          lstr +=` <div class="midle_box">
          <img src="${res[i].img}" alt="">
          <span></span>
          <em></em>
         </div>
         <ul class="smail">        
        </ul>        `;
        left.innerHTML=lstr;
        let sstr = "";
          res[i].imgs.forEach(val => {
            sstr += `<li><img src="${val}" alt=""></li>`;
            
        });
        setTimeout(() => {
        const osm = document.querySelector(".smail");
          osm.innerHTML=sstr;
        }, 0)
        
        const Bbox=document.querySelector(".big_box");
        let Bstr=` <img src="${res[i].img}" alt="">`
        Bbox.innerHTML=Bstr;
        
     
       
        // sstr += `<div class="small_box">
        //         < img src="${res[i].src}" alt="">
        //         <span></span>
        //         <em></em>
        //         </div>
        //     <ul class="list">
        //     </ul>
        // <div class="big_box">
        //     < img src="${res[i].src}" alt="">
        // </div>`;

        // pstr = ` <span>价格</span>
        //        <span class="price">￥${res[i].price}</span>
        //        <span>价值:</span><span class="_price">${(res[i].price/0.41).toFixed(2)}</span>
        //        <span>优惠折扣: 41%</span>`;

        // tstr = `<p>${res[i].title}</p >
        //       <p>${res[i].brand}</p >`;
        //       // console.log(res[i].imgs);
        // res[i].imgs.forEach(val => {
        //     lstr += `<li>< img src="${val}" alt=""></li>`;
        // })

        // omagnifiercont.innerHTML = mstr;
        // opricebox.innerHTML = pstr;
        // otitle.innerHTML = tstr;
        // // console.log(lstr);

        // setTimeout(() => {
        //     const olist = document.querySelector(".list");
        //     olist.innerHTML = lstr;
        //     // 放大镜需要在数据都请求后执行
        //     // console.log(res[i].imgs);
        //     new Magnifier();
        //     new Tab(res[i].imgs);
        // }, 0)
        // new Magnifier();
    }
 
})
        

    // console.log(res[i])
//     // 渲染小图
//     $(".smlbox>img").src = res[i].img;
//     // 渲染大图
//     $(".bigimg>img").src = res[i].img;
//     // 渲染图片列表
//     let str = "";
//     res[i].imgs.forEach(val=>{
//         str += `<li><img src="${val}" alt=""></li>`
//     })
//     $(".magnifier").innerHTML = str;

//     // 渲染标题
//     $(".title_text").innerHTML = res[i].proName;
//     // 计算并渲染现价
//     $(".price").innerHTML = "￥" + (res[i].price * (res[i].discount / 10)).toFixed(1);
//     // 渲染原价
//     $("._price").innerHTML = "￥" + res[i].price;



// },{
//     type:"getGoods1"
// })





//商品简介  页面
class Splist{
    constructor(){
        this.url = "http://localhost:3000/api";
        this.spbox= document.querySelector(".spjj-box")
        this.load();
    }
    load(){
        ajax({
            url:this.url,
            data:{
                type:"getGoods2"
            },
            success:res=>{
                // console.log(res.msg);
                this.res=JSON.parse(res).msg;
                // console.log(this.res);
                this.ranner();
            }
        })
    }
    ranner(){
        let str = "";
        this.res.forEach(val=>{
            str +=` <li><img src="${val.img}" alt=""></li>`
        })
        this.spbox.innerHTML = str;
    }
}
new Splist();








// function $(s){
//     return document.querySelector(s);
// }


// function ajax(url, callback, data){
//     let str = "";
//     for(let i in data){
//         str += `${i}=${data[i]}&`
//     }
//     url += "?" + str;
//     const xhr = new XMLHttpRequest();
//     xhr.open("get",url)
//     xhr.onload = function(){
//         if(xhr.status === 200){
//             callback(xhr.responseText)
//         }
//     }
//     xhr.send();
// }